<template>
	<view class="card_details" :class="{'popupShow':popupShow}">
		<view class="card_details_header car_tf" v-if="detailsData.functionType==2">
			<view class="car_tf_img"><image class="imgBox" :src="detailsData.cover" mode="widthFix"></image></view>
			<view class="card_details_info">
				<view class="li_lable">
					<view class="lable_item lable_xuanzhang lable_xuanzhang_two" v-if="detailsData.functionType==2">
						<image src="/static/index/label04.png" mode="widthFix"></image>
						<text class="lable_name ellipseHide">勋章NFR</text>
					</view>
					<view class="lable_item lable_equity" v-if="detailsData.functionType==1">
						<image src="/static/index/quanyi.png" mode="widthFix"></image>
						<text class="lable_name ellipseHide">权益NFR</text>
					</view>
					<view class="lable_item lable_suanli">
						<image src="/static/index/suanli.png" mode="widthFix"></image>
						<text class="lable_name ellipseHide">算力:{{detailsData.hashRate}}</text>
					</view>
					<block v-if="detailsData.equityCardTagList.length>0">
						<!-- <view class="lable_item lable_grade" :style="{'background': `url(${nav.img}) 100% center / 100% no-repeat`}" v-for="(nav,zIndex) in detailsData.equityCardTagList" :key="zIndex">
							<text class="lable_name ellipseHide">{{nav.name}}</text>
						</view> -->
						<view class="lable_grade_box" v-for="(nav,zIndex) in detailsData.equityCardTagList" :key="zIndex">
							<image :src="nav.img" style="height: 36rpx;" mode="heightFix"></image>
							<view class="lable_item lable_grade">
								<text class="lable_name ellipseHide">{{nav.name}}</text>
							</view>
						</view>
					</block>
				</view>
				<view class="car_tf_info">
					<view class="name">
						<view class="name_box ellipseHide">
							{{detailsData.cardName}}
						</view>
						<view class="name_follow" :class="{'name_follow_no':!detailsData.isConcern}" @click="followFunc(detailsData.id,detailsData.isConcern)">
							<block v-if="detailsData.isConcern">
								  已关注
							</block>
							 <block v-else>
								 <image class="name_follow_img" src="/static/index/name_follow.png" mode="widthFix"></image> <text>关注</text>
							 </block>
						</view>
					</view>
					<view class="quantity">
						<view class="quantity_left">
							<text class="left_01">限量</text>
							<text class="left_02">{{detailsData.issueInventory}}份</text>
						</view>
						<view class="quantity_right" v-if="detailsData.issueType == 1">
							<text>剩余{{detailsData.sellStatus == 4?0:detailsData.surplusTotal}}张</text>
						</view>
					</view>
					<view class="price_box">
						<view class="price">
							<text>￥</text>{{detailsData.price}}
						</view>
						<view class="follow" v-if="detailsData.issueType == 1">
							<image src="/static/index/card_item01.png" mode="widthFix"></image>
							<text>{{detailsData.concernTotal}} 关注</text>
						</view>
						<view class="follow" v-else-if="detailsData.subscribeEnable == 1">
							<image src="/static/index/card_item02.png" mode="widthFix"></image>
							<text>{{detailsData.subscribeTotal}} 预约</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="card_details_header" v-else>
			<view class="header_img01 centerBox">
				<image class="imgBox" src="/static/index/card_01.png" mode="widthFix"></image>
				<image class="imgBox" src="/static/index/card_02.png" mode="widthFix"></image>
			</view>
			<view class="header_img02 centerBox">
				<view class="header_img02_box">
					<image class="header_img" :src="detailsData.cover" ></image>
					<image class="header_img2" :src="detailsData.cover" mode="heightFix"></image>
					<!-- 直接购买 -->
					<block v-if="detailsData.issueType == 1">
						<!-- 已售罄 -->
						<view class="title colo_C5C5C5" v-if="detailsData.sellStatus == 4">
							<image class="time_img" src="/static/index/index-time01.png" ></image>
							<text>已售罄</text>
						</view>
						<!-- 热销中 -->
						<view class="title colo_F61616" v-else-if="detailsData.sellStatus == 2">
							<image class="time_img" src="/static/index/index-fire.png" ></image>
							<text>热销中</text>
						</view>
						<view class="title colo_E6C935" v-else-if="detailsData.sellStatus == 1">
							<image class="time_img" src="/static/index/index-time.png" ></image>
							<block v-if="detailsData.time.timeStatus">
								<text>即将开售</text>
							</block>
							<block v-else>
								<text>敬请期待</text>
							</block>
							<text class="time_word">{{detailsData.startTime.substr(0,detailsData.startTime.length-3)}}</text>
						</view>
					</block>
					<!-- 预约申购 -->
					<block v-else-if="detailsData.issueType == 2">
						<view class="title colo_E6C935" v-if="detailsData.draw">
							<image class="time_img" src="/static/index/index-calendar.png" ></image>
							<text>正在抽签</text>
						</view>
						<view class="title colo_F61616" v-else-if="detailsData.sellStatus == 6">
							<image class="time_img" src="/static/index/index-fire.png" ></image>
							<text>火爆预约中</text>
						</view>
						<view class="title colo_F61616" v-else-if="detailsData.sellStatus == 5">
							<image class="time_img" src="/static/index/index-time.png" ></image>
							<text>即将开放预约</text>
							<text class="time_word">{{detailsData.startTime.substr(5,detailsData.startTime.length-8)}}</text>
						</view>
					</block>
					
					<!-- 预约抢购 -->
					<block v-else>
						<!-- 已售罄 -->
						<view class="title colo_C5C5C5" v-if="detailsData.sellStatus == 15 || detailsData.sellStatus == 16">
							<image class="time_img" src="/static/index/index-time01.png" ></image>
							<text>已售罄</text>
						</view>
						<view class="title colo_E6C935" v-else-if="detailsData.sellStatus == 5">
							<image class="time_img" src="/static/index/index-time.png" ></image>
								<block v-if="detailsData.subscribeEnable == 1">
									<text>即将开售</text>
									<text class="time_word">{{detailsData.startTime.substr(5,detailsData.startTime.length-8)}}</text>
								</block>
								<block v-else>
									<text>敬请期待</text>
									<text class="time_word">{{detailsData.whiteStartBuyTime.substr(5,11)}}</text>
								</block>
						</view>
						<view class="title colo_F61616" v-else-if="detailsData.sellStatus == 8">
							<image class="time_img" src="/static/index/index-fire.png" ></image>
							<text>火爆预约中</text>
						</view>
						<view class="title colo_E6C935" v-else-if="detailsData.sellStatus == 10 ">
							<image class="time_img" src="/static/index/index-time.png" ></image>
							<text>敬请期待</text>
							<text class="time_word">{{detailsData.whiteStartBuyTime.substr(5,11)}}</text>
						</view>
						<view class="title colo_E6C935" v-else-if="detailsData.sellStatus == 12 ">
							<image class="time_img" src="/static/index/index-time.png" ></image>
							<text>敬请期待</text>
							<text class="time_word">{{detailsData.startBuyTime.substr(5,11)}}</text>
						</view>
						<!-- 热销中 -->
						<view class="title colo_F61616" v-else-if="detailsData.sellStatus == 11 || detailsData.sellStatus == 13">
							<image class="time_img" src="/static/index/index-fire.png" ></image>
							<text>热销中</text>
						</view>
					</block>
	
				</view>
			</view>
			<view class="header_img03 centerBox">
				<image class="imgBox" src="/static/index/card_03.png" mode="widthFix"></image>
				<view class="card_details_info">
					<view class="name">
						<view class="name_box ellipseHide">
							{{detailsData.cardName}}
						</view>
						<view class="name_follow" :class="{'name_follow_no':!detailsData.isConcern}" @click="followFunc(detailsData.id,detailsData.isConcern)">
							<block v-if="detailsData.isConcern">
								  已关注
							</block>
							 <block v-else>
								 <image class="name_follow_img" src="/static/index/name_follow.png" mode="widthFix"></image> <text>关注</text>
							 </block>
						</view>
					</view>
					<view class="quantity">
						<view class="quantity_left">
							<text class="left_01">限量</text>
							<text class="left_02">{{detailsData.issueInventory}}份</text>
						</view>
						<view class="quantity_right" v-if="detailsData.issueType == 1">
							<text>剩余{{detailsData.sellStatus == 4?0:detailsData.surplusTotal}}张</text>
						</view>
					</view>
					<view class="price_box">
						<view class="price">
							<text>￥</text>{{detailsData.price}}
						</view>
						<view class="follow" v-if="detailsData.issueType == 1">
							<image src="/static/index/card_item01.png" mode="widthFix"></image>
							<text>{{detailsData.concernTotal}} 关注</text>
						</view>
						<view class="follow" v-else-if="detailsData.subscribeEnable == 1">
							<image src="/static/index/card_item02.png" mode="widthFix"></image>
							<text>{{detailsData.subscribeTotal}} 预约</text>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="card_nav_box" v-if="detailsData.shopName != ''">
			<image :src="detailsData.shopIcon" mode="aspectFill" v-if="detailsData.shopIcon!=''"></image>
			<view class="nav_box_word">
				<view class="title">{{detailsData.shopName}}</view>
				<!-- <view class="subtitle">{{detailsData.name}}</view> -->
			</view>
		</view>

		<!-- 预约流程 预约申购-->
		<view class="card_item_info" v-if="detailsData.issueType == 2">
			<view class="menTitle" style="padding-bottom: unset;">
				<view class="titleLine"></view>
				<text>预约流程</text>
			</view>
			<view class="card_nav_line" >
				<view class="line_li" v-for="(item,index) in reservationData" :key="index">
			           <view class="yuan" :class="{'yuan_no':item.status}">
							<view class="name_li">
							      <view class="name_li_img name_li_img_zhong " @click="open" v-if="winningStatus && index == 2">
										中签用户
									</view>
									<view class="name_li_img" v-else></view>
									<text>{{nameListZq[index]}}</text>
							</view>
							<view class="time">
								{{item.date}}<br/>{{item.time}}
							</view>
						</view>
						<view class="line" :class="{'line_no':item.status}" v-show="reservationData.length -1 != index"></view>
				</view>
			</view>
		</view>
		
		<!-- 预约流程 -->
		<view class="card_item_info card_item_info_q card_item_info_two" v-if="detailsData.issueType == 3">
			<view class="menTitle" >
				<view class="titleLine"></view>
				<text>抢购流程</text>
			</view>
			
			<scroll-view scroll-x="true" class="boxScrollView" :scroll-left="scrollLeft">
			  <view class="card_nav_buy">
				<view class="buy_item" v-for="(item,index) in reservationData" :key="index">
					<view class="buy_top" :class="{'buy_yes':item.onStatus}">
					<!-- <view class="buy_top" > -->
						<view class="top_name">{{item.name}}</view>
						<view class="top_time">{{item.date}} {{item.time}}</view>
					</view>
					<view class="buy_line">
						<view class="buy_line_item" :class="{'b227BF1':item.status || item.leftColor}"></view>
						<view class="buy_line_item" :class="{'b227BF1':item.status || item.rightColor}"></view>
					</view>
					<view class="buy_yuan" :class="item.status?(item.onStatus?'buy_yuan_check':'buy_yuan_yes'):''"></view>
					<!-- <view class="buy_yuan" ></view> -->
					<view class="buy_but_box">
						<view class="buy_but" @click="open" v-if="winningStatus && item.name == '白名单发布'">用户名单</view>
					</view>
				</view>
			  </view>
			</scroll-view>
		</view>
		
		<view class="card_item_info">
			<view class="menTitle">
				<view class="titleLine"></view>
				<text>认证信息</text>
			</view>
			<view class="c_item_li">
				<text class="ci_left">交易哈希</text>
				<view class="ci_right">
					<text class="voucherClass ellipseHide">{{detailsData.voucher}}</text>
					<image @click="copy(detailsData.voucher)" src="/static/my/copy01.png" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="c_item_li">
				<text class="ci_left">发 行 方</text>
				<view class="ci_right">
					<text>{{detailsData.name}}</text>
				</view>
			</view>
		</view>
		<view class="card_introduction">
			<view class="menTitle">
				<view class="titleLine"></view>
				<text v-if="detailsData.functionType==1">权益卡介绍</text>
				<text v-else>勋章NFR介绍</text>
			</view>
			<block v-for="el in detailsData.img">
			  <image class="imgBox" :src="el" mode="widthFix"></image>
			</block>
		</view>
		<view class="card_brand">
			<view class="menTitle">
				<view class="titleLine"></view>
				<text>品牌保障</text>
			</view>
			<view class="card_brand_li" v-for="(vo,voindex) in brandList" :key="vo.id">
				<view class="brand_li_left">
					<image class="left_icon" :src="vo.icon" mode="widthFix"></image>
				</view>
				<view class="brand_li_right">
					<view class="w_title">{{vo.title}}</view>
					<view class="w_content">{{vo.content}}</view>
				</view>
			</view>
		</view>
		<view class="card_brand purchase_notes">
			<view class="menTitle">
				<view class="titleLine"></view>
				<text>购买须知</text>
			</view>
			<view class="notes">
				数字权益卡为数字会员卡，仅限实名认证为年满18-69周岁的中国大陆用户购买。因数字权益卡的特殊性，一经购买成功，将不支持退换。数字权益卡的知识产权或其他权益由发行方或原创者所有，除另行取得版权拥有者书面同意外，用户不得将数字权益卡用于任何商业用途。请勿对数字权益卡进行炒作、场外交易、欺诈，或以任何其他非法方式进行使用。
			</view>
		</view>
		<view class="price_box card_footer">
			<view class="price">
				<text>￥</text>{{detailsData.price}}
			</view>
			
			<!-- 直接购买 -->
			<block v-if="detailsData.issueType == 1">
				
				<view class="f_buttom"  v-if="detailsData.sellStatus == 4">
					<view class="q_purchase q_end">
						已售罄
					</view>
				</view>
				<view class="f_buttom" @click="purchase" v-else-if="detailsData.sellStatus == 2">
					<view class="q_purchase">
						立即购买
					</view>
				</view>
				<view class="f_buttom"  v-else-if="detailsData.sellStatus == 1">
					<view class="q_purchase" v-if="detailsData.time.timeStatus">
						<uni-countdown @timeup=timeup(detailsData.sellStatus) :fontSize="12"
							:show-day="false" color="#FFFFFF" splitorColor="#FFFFFF"
							:hour="detailsData.time.hours" :minute="detailsData.time.minutes"
							:second="detailsData.time.seconds"></uni-countdown>
					</view>
					<view class="q_purchase" v-else>
						{{detailsData.startTime.substr(5,detailsData.startTime.length-8)}} 开售
					</view>
				</view>
				
			</block>
			<!-- 预约申购 -->
			<block v-else-if="detailsData.issueType == 2">
				<view class="f_buttom"  v-if="detailsData.endStatus">
					<view class="q_purchase q_end">
						已结束
					</view>
				</view>
				<view class="f_buttom"  v-else-if="detailsData.draw">
					<view class="q_purchase">
						正在抽签
					</view>
				</view>
				<!--即将开售  -->
				<view class="f_buttom" v-else-if="detailsData.isSubscribe">
					<view class="q_purchase">
						已预约
					</view>
				</view>
				<view class="f_buttom" v-else-if="detailsData.sellStatus == 6" @click="reservationLottery(detailsData.id)">
					<view class="right_box right01">预约抽签</view>
					<view class="right_box right02">
						<image class="right_sd" src="/static/index/index-sd.png" mode="widthFix"></image>
						<text>{{detailsData.endTime.substr(0,detailsData.endTime.length-3)}} 停</text>
					</view>
				</view>
				
				<view class="f_buttom" v-else-if="detailsData.sellStatus == 5">
					<view class="right_box right01">即将开放预约</view>
					<view class="right_box right02">
						<image class="right_sd" src="/static/index/index-sd.png" mode="widthFix"></image>
						<text>{{detailsData.startTime.substr(5,detailsData.startTime.length-8)}}</text>
					</view>
				</view>
			</block>
			<!-- 预约抢购 -->
			<block v-else>
				<view class="f_buttom" v-if="detailsData.sellStatus == 5">
					<view class="q_order q_class01">
						未开放预约
					</view>
				</view>
				<view class="f_buttom"  v-else-if="detailsData.sellStatus == 8 && detailsData.isSubscribe">
					<view class="q_order coming_soon">
						预约成功
					</view>
				</view>
				<view class="f_buttom" @click="reservationLottery(detailsData.id)" v-else-if="detailsData.sellStatus == 8">
					<view class="q_order">
						立即预约
					</view>
				</view>
				
				<view class="f_buttom"  v-else-if="detailsData.sellStatus == 9 ">
					<view class="q_order coming_soon">
						白名单待公布
					</view>
				</view>
				<view class="f_buttom"  v-else-if="detailsData.sellStatus == 10 || detailsData.sellStatus == 12">
					<view class="q_order coming_soon">
						等待抢购
					</view>
				</view>
				<view class="f_buttom"  v-else-if="detailsData.sellStatus == 11 && !detailsData.isWhite">
					<view class="q_order q_class01">
						无抢购资格
					</view>
				</view>
				<view class="f_buttom" @click="purchase" v-else-if="detailsData.sellStatus == 11 || detailsData.sellStatus == 13">
					<view class="q_order">
						立即抢购
					</view>
				</view>
				<view class="f_buttom" v-else-if="detailsData.sellStatus == 14">
					<view class="q_order q_class01">
						抢购结束
					</view>
				</view>
				
				<view class="f_buttom"  v-else-if="detailsData.sellStatus==15 || detailsData.sellStatus == 16" >
					<view class="q_order q_end">
						已售罄
					</view>
				</view>

			</block>
		</view>
		
		<uni-popup ref="popupRealName" type="dialog">
			<uni-popup-dialog mode="base" :confirmText="'去实名'" :title="'您还未实名认证'"
				:content="'为了更好的保障您的权益，请在购买数字权益卡前，先进行实名认证'" :before-close="true" @close="realNameClose"
				@confirm="realNameConfirm"></uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="popupLogin" type="dialog">
			<uni-popup-dialog mode="base" :confirmText="'去登录'" :title="'提示'" :content="'请先登录后进行购买/预约'"
				:before-close="true" @close="loginClose" @confirm="loginConfirm"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="followLogin" type="dialog">
			<uni-popup-dialog mode="base" :confirmText="'去登录'" :title="'提示'" :content="'请先登录后进行关注'"
				:before-close="true" @close="followClose" @confirm="followConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup" type="center">
			<view class="popupBox">
				<view class="pTitle" v-if="detailsData.issueType == 2">中签用户</view>
				<view class="pTitle" v-else>白名单用户</view>
				<view class="pListBox">
					<view class="pListBox_li pListBox_li_first_child">
						<view class="li_item">用户姓名</view>
						<view class="li_item">账号</view>
					</view>
					<scroll-view scroll-y="true" class="scrollView">
						<block v-if="userList.length > 0">
						<view class="pListBox_li" v-for="(item,index) in userList" :key="index">
							<view class="li_item">{{item.name}}</view>
							<view class="li_item">{{item.phone}}</view>
						</view>
						</block>
						<block v-else>
							<view class="pListBox_li" style="padding: 0 10rpx;width: 100%;display: flex;justify-content: center;">
								暂无数据
							</view>
						</block>
					</scroll-view>
				</view>

				<view class="know" @click="close">
					返回
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bImgUrl:'',
				popupShow:false,
				id: '',
				detailsData: {},
				brandList: [{
						id: 1,
						title: 'BSN-DDC技术支持',
						content: '神椰Magic CoCo是基于国家信息中心BSN区块链技术协议发行的NFR。每张数字权益卡在BSN-DDC链上都有链上唯一标识，且不可篡改。',
						icon: '/static/index/card_item07.png'
					},
					{
						id: 2,
						title: '官方授权',
						content: '本平台发售的所有NFR数字权益卡均由品牌方、艺术家官方授权，神椰平台联合代理发行，购买后可以凭借BSN-DDC链上唯一标识进行验证。',
						icon: '/static/index/card_item08.png'
					},
					{
						id: 3,
						title: '尊享权益畅享',
						content: '尊贵身份象征、平台品牌独有标识、联名权益卡白名单、IP繁衍周边优先购、定制潮牌服饰、豪华度假旅游、品牌KA商户大额消费券、奢华生活一手掌握。',
						icon: '/static/index/card_item09.png'
					},
					{
						id: 4,
						title: '持卡无忧',
						content: '平台深耕零售和预付式消费行业，已拥有3000+家商户会员，10W+以上的用户体量，同时平台引入银行进行存管，每一笔资金流转有据可查。',
						icon: '/static/index/card_item10.png'
					},
				],
				nameListZq:['开放预约','预约结束','预约结果','付款截止','发放权益卡'],
				nameListBmd:['开放预约','预约结束','白名单发布','优先抢购','抢购结束','公开抢购','抢购结束'],
				reservationData:[],
				userList: [],
				winningStatus:true, //查看是否过中间结果时间
				followState: false,
				scrollLeft:0,
				contentScrollW:0, //当前宽度
				tfType:true // 判断是否是通分类型
			}
		},
		onLoad(e) {
			this.bImgUrl = this.baseImgUrl
			this.id = e.id
			// if (e.codeNum) {
			// 	this.getH5Token(e.codeNum)
			// }else{
			// 	this.getDetailsData(e.id)
			// }
			
			
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.card_item_info').boundingClientRect(data => {
					 // 拿到 scroll-view 组件宽度
					 this.contentScrollW = data.width/3
			 }).exec();
			 this.getDetailsData(this.id)
		},
		methods: {
			// 预约
			async reservationLottery(id){
				if(this.$queue.getData('token') != undefined){
					var res = await this.$api.getRealNameInfo()
				}
				if(this.$queue.getData('token') == undefined){
					this.popupShow = true
					this.$refs.popupLogin.open()
				}else if(res.data.idCard == '' || res.data.name == ''){
					this.popupShow = true
					this.$refs.popupRealName.open()
				}else{
					this.popupShow = false
					this.$api.setSubscribe(id).then(res=>{
						if(res.code == 200){
							this.$queue.showToast('预约成功')
							this.detailsData.isSubscribe = true
							this.detailsData.subscribeTotal ++
						}
					})
				}

			},
			timeup(status) {
				if (status == 1) {
					this.detailsData.sellStatus = 2
				} else if (status == 5) {
					this.detailsData.sellStatus = 6
				}
			},
			drawfunc(endTime,executeTime){
				if(new Date(endTime.replace(/-/g, '/')) < new Date() && new Date(executeTime.replace(/-/g, '/')) > new Date()){
					return true
				}
				else return false
			},
			async getDetailsData(id) {
				var res = await this.$api.getEquityCardDetail(id)
				
				uni.setNavigationBarTitle({
					title:res.result.cardName
				})
				res.result.time = this.timeQuantum(res.result.startTime)
				res.result.drawSaleStatus = this.drawfunc(res.result.startTime,res.result.endTime)
				if(res.result.issueType == 2 ){
					res.result.endStatus = this.paytimeQuantum(res.result.executeTime)
					this.winningStatus = this.paytimeQuantum(res.result.executeTime)
					// this.reservationData.push(this.conversionTime(res.result.startTime,res.result.issueType))
					this.reservationData.push(this.conversionTime(res.result.startTime,res.result))
					this.reservationData.push(this.conversionTime(res.result.endTime,res.result))
					this.reservationData.push(this.conversionTime(res.result.executeTime,res.result))
					this.reservationData.push(this.conversionTime(res.result.payTime,res.result))
					this.reservationData.push(this.conversionTime(res.result.issueTime,res.result))
					this.reservationData = this.reservationData.map(el=>{
						   el.status = false
						if(new Date(time.replace(/-/g, '/')) < new Date()){
							el.status = true
						}
						return el
					})
	
					res.result.draw = this.drawfunc(res.result.endTime,res.result.executeTime)
				}else if(res.result.issueType == 3){
					// res.result.sellStatus = 15
					// 是否显示白名单按钮
					if(res.result.sellStatus != 8 && res.result.sellStatus != 9 && res.result.sellStatus != 5){
						this.winningStatus = true
					}else{
						this.winningStatus = false
					}
					// this.winningStatus = this.paytimeQuantum(res.result.whiteTime)
					// this.reservationData.push(this.conversionTime(res.result.startTime,res.result.issueType,'开放预约',1,res.result.sellStatus))
					if(res.result.subscribeEnable == 1){
						this.reservationData.push(this.conversionTime(res.result.startTime,res.result,'开放预约',1))
						this.reservationData.push(this.conversionTime(res.result.endTime,res.result,'预约结束',2))
					}
					this.reservationData.push(this.conversionTime(res.result.whiteTime,res.result,'白名单发布',3))
					this.reservationData.push(this.conversionTime(res.result.whiteStartBuyTime,res.result,'优先抢购',4))
					this.reservationData.push(this.conversionTime(res.result.whiteEndBuyTime,res.result,'抢购结束',5))
					this.reservationData.push(this.conversionTime(res.result.startBuyTime,res.result,'公开抢购',6))
					this.reservationData.push(this.conversionTime(res.result.endBuyTime,res.result,'抢购结束',7))
				}
				else{
					res.result.endStatus = this.paytimeQuantum(res.result.endTime)
					res.result.draw == false

				}
				this.detailsData = res.result
				// console.log(this.detailsData)
				// console.log(this.reservationData)
				// console.log(res)
			},
			copy(text) {
				if(text != ''){
					var _this = this
					 _this.$copyText(text).then(
                        res => {
                          uni.showToast({
                            title: '复制成功',
                            icon: 'none'
                          })
                        }
                      )
				}
			},
			async open() {
				var res = []
				if(this.detailsData.issueType == 2){
					 res = await this.$api.queryCustomer(this.detailsData.issueTimeId)
				}
				else{
					res = await this.$api.queryWhiteCustomer(this.detailsData.issueId)
				}
				
				this.userList = res.result
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			// 转跳支付详情
			async purchase() {
				if(this.$queue.getData('token') != undefined){
					var res = await this.$api.getRealNameInfo()
				}
				
				if(this.$queue.getData('token') == undefined){
					this.popupShow = true
					this.$refs.popupLogin.open()
				}else if(res.data.idCard == '' || res.data.name == ''){
					this.popupShow = true
					this.$refs.popupRealName.open()
				}else{
					this.popupShow = false
					// uni.navigateTo({
					// 	url: '/pages/pay/order-details?id='+this.id
					// })
					window.location.href =  '/pages/pay/order-details?id='+this.id
				}
			},
			// 收藏
			 async followFunc(id,isConcern) {
				 if(this.$queue.getData('token') == undefined){
				 	this.popupShow = true
				 	this.$refs.followLogin.open()
				 }else{
					 this.popupShow = false
					 this.detailsData.isConcern = !this.detailsData.isConcern
					 var type = 2
					 if (this.detailsData.isConcern) {
					 	type = 1
						this.detailsData.concernTotal ++
					 	this.$queue.showToast('关注成功');
					 } else {
						 this.detailsData.concernTotal --
					 	this.$queue.showToast('已取消关注');
					 }
					 await this.$api.setAttention({equityCardId:id,type:type})
				 }
			},
			// 转换时间
			conversionTime(time,item,name = '',numNume = 0){
				var status= false,onStatus= false,leftColor= false,rightColor = false
				var sellStatus = item.sellStatus
				if(sellStatus == 15) sellStatus = 11   //
				else if(sellStatus == 16) sellStatus = 13  //
				var timeLength = time.length-8
				var res = time.substr(5,timeLength)
				    res = res.split(' ')
					var date = res[0]
				if(item.issueType == 3){
					var reDate = res[0].split('-')
					 date = reDate[0]+'月'+reDate[1]+'日'
				}
				if(
				  (sellStatus == 8 && numNume == 1) || 
				  (sellStatus == 9 && numNume == 2) || 
				  (sellStatus == 10 && numNume == 3) || 
				  (sellStatus == 11 && numNume == 4) || 
				  (sellStatus == 12 && numNume == 5) || 
				  (sellStatus == 13 && numNume == 6) || 
				  (sellStatus == 14 && numNume == 7) 
				 ){
					onStatus = true
				}
				if(
				  (sellStatus == 8 && numNume == 2) || 
				  (sellStatus == 9 && numNume == 3) || 
				  (sellStatus == 10 && numNume == 4) || 
				  (sellStatus == 11 && numNume == 5) || 
				  (sellStatus == 12 && numNume == 6) || 
				  (sellStatus == 13 && numNume == 7) 
				 ){
					// rightColor = true
					leftColor = true
				}
				// 移动居中
				if(item.subscribeEnable == 2){
					if(sellStatus == 12) {this.scrollLeft = this.contentScrollW*1}
					else if(sellStatus == 13 || sellStatus == 14)  {this.scrollLeft = this.contentScrollW*2}
				}else{
					// 偏移量
					if(sellStatus == 10 ) {this.scrollLeft = this.contentScrollW*1}
					else if(sellStatus == 11 )  {this.scrollLeft = this.contentScrollW*2}
					else if(sellStatus == 12 ) {this.scrollLeft = this.contentScrollW*3}
					else if(sellStatus == 13 || sellStatus == 14)  {this.scrollLeft = this.contentScrollW*4}
				}
				if(
				 (sellStatus == 8 && numNume == 1) ||
				 (sellStatus == 9 && (numNume == 1 || numNume == 2)) ||
				 (sellStatus == 10 && (numNume == 1 || numNume == 2 || numNume == 3)) ||
				 (sellStatus == 11 && numNume != 5 && numNume != 6 && numNume != 7) ||
				 (sellStatus == 12 && numNume != 6 && numNume != 7) ||
				 (sellStatus == 13 && numNume != 7) ||
				 sellStatus == 14 
				){
					status = true
				}
					// if(new Date(time.replace(/-/g, '/')) < new Date(newTime)){
					// // if(new Date(time.replace(/-/g, '/')) < new Date()){
					// 	status = true
					// }
				  var data = {
					  date:date,
					  time:res[1],
					  originalTime:time,
					  status:status,
					  name:name,
					  onStatus:onStatus,
					  leftColor:leftColor,
					  rightColor:rightColor
				  }
				return data
			},
			// 判定当前时间是否大于 给定时间 小于 fasle 大于true
			paytimeQuantum(paytime) {
				if (paytime != null) {
					paytime = new Date(paytime.replace(/-/g, '/')); //获取传入时间 并将其转化为date型
					var nowTime = new Date(); //获取当前时间
					if (paytime < nowTime) {
						return true
					}
					return false
				} else {
					return false
				}

			},
			//计算两个时间之间的时间差 多少天时分秒
			timeQuantum(time) {
				time = new Date(time.replace(/-/g, '/')); //获取传入时间 并将其转化为date型
				var nowTime = new Date(); //获取当前时间
				var timeDifference = time.getTime() - nowTime.getTime(); //时间差的毫秒数
				// console.log(time.getTime() +'===='+nowTime.getTime())
				var total = timeDifference / 1000; //相差的秒数;
				// var endTime = parseInt(total / ()); //计算是否超过24小时;

				if (total > (60 * 60 * 24) || total <= 0) {
					return {
						timeStatus: false
					};
				} else {
					var days = Math.floor(timeDifference / (24 * 3600 * 1000)); //计算出相差天数
					var leave1 = timeDifference % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
					var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
					var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
					var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
					var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
					var seconds = Math.round(leave3 / 1000); //计算相差秒数
					var data = {
						days: days,
						hours: hours,
						minutes: minutes,
						seconds: seconds,
						timeStatus: true
					}
					return data;
				}
			},
			realNameConfirm() {
				uni.navigateTo({
					url: '/pages/my/certification/certification'
				})
			},
			loginConfirm() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			realNameClose() {
				this.popupShow = false
				this.$refs.popupRealName.close()
			},
			loginClose() {
				this.popupShow = false
				this.$refs.popupLogin.close()
			},
			// 关注
			followConfirm() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			followClose() {
				this.popupShow = false
				this.$refs.followLogin.close()
			},
		}
	}
</script>

<style scoped>
	page {
		background: #FBFBFC;
	}
	.popupShow{
		overflow: hidden;
		position: fixed;
		height: 100vh;
		width: 100%;
	}
	.card_details {
		padding-bottom: 240rpx;
	}

	.card_details_header {
		width: 750rpx;
		height: 460rpx;
		background: url('@/static/index/card_bj.png') no-repeat;
		background-size: 100% auto;
		background-position: left bottom;
		position: relative;
		margin-bottom: 270rpx;
	}

	.centerBox {
		left: 50%;
		transform: translateX(-50%);
	}

	.header_img01 {
		position: absolute;
		width: 668rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		z-index: 1;
		bottom: 46rpx;
	}

	.header_img02 {
		position: absolute;
		z-index: 2;
		bottom: 10rpx;
	}

	.header_img03 {
		position: absolute;
		width: 710rpx;
		display: flex;
		flex-direction: column;
		bottom: -238rpx;
		z-index: 3;
	}

	.header_img03 .imgBox {
		width: 710rpx;
		height: 28rpx;
	}

	/* 卡 */
	.header_img02_box {
		position: relative;
		width: 630rpx;
		height: 376rpx;
		overflow: hidden;
		border-radius: 24rpx;
	}

	.header_img02_box .header_img {
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		filter: blur(5px);
	}
	.header_img02_box .header_img2 {
		height: 100%;
		position: absolute;
		z-index: 2;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
	.header_img02_box .title {
		position: absolute;
		z-index: 2;
		top: 22rpx;
		left: 22rpx;
		display: inline-flex;
		align-items: center;
		flex-direction: row;
		padding: 0 16rpx;
		font-size: 24rpx;
		height: 42rpx;
		background: #000000;
		opacity: 0.6;
		border-radius: 200rpx;
	}

	.header_img02_box .title .time_img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.header_img02_box .follow {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.header_img02 .title .time_word {
		margin-left: 10rpx;
	}

	.colo_E6C935 {
		color: #E6C935;
	}

	.colo_F61616 {
		color: #F61616;
	}
	.colo_C5C5C5 {
		color: #C5C5C5;
	}

	.card_details_info {
		width: 710rpx;
		/* margin: 0 auto; */
		background: #fff;
		box-shadow: 0px 0px 20rpx #ECECEC;
		border-radius: 0px 0px 24rpx 24rpx;
		padding: 36rpx 30rpx 32rpx 30rpx;
		box-sizing: border-box;
	}

    /* 关注 */
	.card_details_info .name {
		color: #222222;
		font-size: 36rpx;
		font-weight: 400;
		margin-bottom: 18rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.card_details_info .name .name_box{
		width: 460rpx;
	}
	.card_details_info .name .name_follow{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		font-size: 28rpx;
		color: #F7F7F7;
		width: 144rpx;
		height: 56rpx;
		border-radius: 200rpx;
		background: linear-gradient(100.04deg, #C6C6C6 4.02%, #989898 100%);

	}
	.card_details_info .name .name_follow_no{
		background: linear-gradient(100.04deg, #FFE498 4.02%, #DFA940 100%);
		color: #875E0F;
	}
	.name_follow_img{
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}
	/* end */

	.quantity {
		display: flex;
		width: 100%;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.quantity_left text {
		padding: 0 14rpx;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.quantity_left .left_01 {
		color: #926300;
		background: #FBE6BA;
		border-radius: 4rpx 0 0 4rpx;
	}

	.quantity_left .left_02 {
		color: #BC8000;
		background: #FFF9EB;
		border-radius: 0px 4rpx 4rpx 0px;
	}

	.quantity .quantity_right text {
		font-weight: 400;
		font-size: 22rpx;
		color: #F92828;
		padding: 2rpx 12rpx;
		background: #FEE2E2;
		border-radius: 4rpx;
		line-height: 30rpx;
		margin-left: 16rpx;
	}

	.price_box {
		margin-top: 22rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.price_box .price {
		font-weight: 700;
		line-height: 42rpx;
		color: #222222;
		font-size: 52rpx;
		line-height: 58rpx;
	}

	.price_box .price text {
		font-weight: 400;
		font-size: 38rpx;
		line-height: 56rpx;
	}

	.price_box .follow {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #555555;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 36rpx;
	}

	.price_box .follow image {
		width: 28rpx;
		height: 26rpx;
		margin-right: 12rpx;
	}

	.card_nav_box {
		width: 710rpx;
		min-height: 148rpx;
		margin: 0 auto;
		background: #FFFFFF url('@/static/index/card_item03.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 24rpx;
		box-shadow: 0px 0px 20rpx #ECECEC;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.card_nav_box image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.nav_box_word .title {
		font-weight: 400;
		font-size: 30rpx;
		line-height: 42rpx;
		color: #222222;
	}

	.nav_box_word .subtitle {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #666666;
		margin-top: 6rpx;
	}

	.card_item_info {
		width: 710rpx;
		margin: 0 auto;
		padding: 0 30rpx 44rpx 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx #ECECEC;
		border-radius: 24rpx;
		margin-top: 30rpx;
	}

	/* 预约流程 */
	.card_nav_name {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.line_no{
		background: #E8E8E8 !important;
	}
	.yuan_no{
		background: #BEBEBE !important;
	}

	.card_nav_line {
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	/deep/ .boxScrollView ::-webkit-scrollbar{
		display: none;
	}
	.line_li {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 220rpx;
	}
	.line_li .name_li {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		height: 100rpx;
		width: 120rpx;
		color: #333333;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -100rpx;
		/* margin-top: 120rpx; */
		
	}

	.line_li .name_li .name_li_img {
		height: 56rpx;
	}
	.line_li .name_li .name_li_img_zhong{
		width: 114rpx;
		height: 56rpx;
		background: url('@/static/index/winning-user.png') no-repeat;
		background-size: 100% 100%;
		color: #fff;
		display: flex;
		justify-content: center;
		line-height: 46rpx;
	}

	.line_li  .yuan {
		width: 12rpx;
		height: 12rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 50%;
		position: relative;
	}

	.line_li .yuan .time {
		font-size: 22rpx;
		/* text-align: center; */
		color: #555555;
		width: 68rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 24rpx;
	}
	
	.line_li:first-child .yuan .time,.line_li:first-child .yuan .name_li{
		left: 0;
		transform: unset;
		align-items: flex-start;
	}
    .line_li:last-child .yuan .name_li,.line_li:last-child .yuan .time{
		left: unset;
		right: -10rpx;
		transform: unset;
		/* align-items: flex-start; */
	}
	.card_last{
		left: 50% !important;
		transform: translateX(-50%) !important;
	}
	.line_li .line {
		background: #BFDFFC;
		border-radius: 20rpx;
		height: 2rpx;
		width: 146rpx;
	}
	
	.card_nav_time {
		display: flex;
		flex-direction: row;
		margin-top: 12rpx;
	}

	/* 	.card_nav_time .time_li{
		font-size: 20rpx;
		color: #555555;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 68rpx;
	}
	.card_nav_time .time_li:nth-child(1){ margin-right: 72rpx;}
	.card_nav_time .time_li:nth-child(2){ margin-right: 94rpx;}
	.card_nav_time .time_li:nth-child(3){ margin-right: 96rpx;}
	.card_nav_time .time_li:nth-child(4){ margin-right: 80rpx;} */
	/* 标题 */
	.menTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-bottom: 40rpx;
		padding-top: 30rpx;
		font-weight: 600;
		font-size: 34rpx;
		color: #222222;
	}

	.menTitle .titleLine {
		width: 6rpx;
		height: 32rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 20rpx;
		margin-right: 12rpx;
	}

	.c_item_li {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: #222222;
		font-size: 32rpx;
		margin-bottom: 16rpx;
	}

	.c_item_li:last-child {
		margin-bottom: unset;
	}

	.c_item_li .ci_right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.voucherClass{
		width: 440rpx;
		text-align: right;
		display: inline-block;
	}
	.c_item_li .ci_right image {
		width: 32rpx;
		height: 30rpx;
		margin-left: 12rpx;
	}

	/* 权益卡介绍 */
	.card_introduction {
		width: 690rpx;
		margin: 0 auto;

	}

	/* 品牌保障 */
	.card_brand {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx #ECECEC;
		border-radius: 24rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding: 0 30rpx 40rpx 30rpx;
		box-sizing: border-box;
	}

	.card_brand_li {
		position: relative;
		width: 650rpx;
		min-height: 148rpx;
		margin-bottom: 22rpx;
		/* display: flex; */
	}

	.brand_li_left {
		position: absolute;
		width: 148rpx;
		min-height: 152rpx;
		height: 100%;
		background: url('/static/index/card_item05.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.brand_li_left .left_icon {
		width: 68rpx;
		height: 68rpx;
		margin-right: 14rpx;
		margin-top: -14rpx;
	}

	.brand_li_right {
		margin-left: 126rpx;
		width: 524rpx;
		min-height: 152rpx;
		/* height: 100%; */
		background: url('/static/index/card_item06.png') no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 18rpx 36rpx 26rpx 44rpx;
	}

	.brand_li_right .w_title {
		font-weight: 400;
		font-size: 32rpx;
		line-height: 42rpx;
		color: #222222;
	}

	.brand_li_right .w_content {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #B08F64;
		margin-top: 6rpx;
	}

	.purchase_notes {
		margin-top: 30rpx;
	}

	.purchase_notes .notes {
		font-weight: 400;
		font-size: 32rpx;
		line-height: 48rpx;
		color: #222222;
	}

	.card_footer {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 160rpx;
		padding: 14rpx 40rpx 0;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px -1rpx 2rpx rgba(179, 179, 179, 0.3);
		margin-top: unset;
		align-items: flex-start;
	}

	.f_buttom {
		color: #FFFFFF;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
	}

	/* 即将开售 */
	.f_buttom .right_box {
		height: 72rpx;
		display: flex;
		align-items: center;
	}

	.f_buttom .right01 {
		padding: 0 18rpx;
		background: linear-gradient(90deg, #494949 12.09%, #363231 102.18%);
		border-radius: 4rpx 0px 0px 20rpx;
	}

	.f_buttom .right_sd {
		width: 36rpx;
		height: 72rpx;
		position: absolute;
		top: 0;
		left: -9.5rpx;
	}

	.f_buttom .right02 {
		position: relative;
		padding: 0 36rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 0px 20rpx 4rpx 0px;
	}
	/* 直接购买 */
	.f_buttom .q_purchase{
		padding: 16rpx 40rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 16rpx;
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
	}
	/* 立即预约 */
	.f_buttom .q_order {
		width: 272rpx;
		height: 86rpx;
		line-height: 86rpx;
		border-radius: 200rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
	}
	
	.f_buttom .q_class01{
		background: linear-gradient(89.93deg, #82C0FB 0.06%, #A099FB 99.94%);
	}
	 .f_buttom .coming_soon {
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
		border: 2rpx solid #0B87F2;
		text-align: center;
	}
	/* 已结束 */
	.f_buttom .q_end {
		background: #BDBDBD;
	}

	.popupBox {
		width: 612rpx;
		background: #fff url('@/static/index/index_bg03.png') no-repeat;
		background-size: 100% auto;
		border-radius: 16rpx;
		padding-bottom: 44rpx;
	}

	.popupBox .pTitle {
		padding: 40rpx 0;
		text-align: center;
		width: 100%;
		font-size: 36rpx;
		color: #222222;
	}

	.scrollView {
		width: 100%;
		margin: 0 auto;
		max-height: 640rpx;
	}

	.popupBox .pListBox {
		width: 512rpx;
		max-height: 724rpx;
		overflow: hidden;
		margin: 0 auto;
		border: 1rpx solid #E6E6E6;
	}

	.popupBox .pListBox .pListBox_li {
		width: 100%;
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #E5E5E5;
		color: #333333;
		font-size: 28rpx;
	}

	.popupBox .pListBox .pListBox_li .li_item:first-child {
		border-right: 1rpx solid #E5E5E5;
	}

	.popupBox .pListBox .pListBox_li_first_child {
		font-size: 30rpx;
		color: #222222;
	}

	.popupBox .pListBox .pListBox_li:last-child {
		border-bottom: unset;
	}

	.popupBox .pListBox .pListBox_li .li_item {
		width: 50%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.know {
		width: 200rpx;
		height: 72rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		border-radius: 8px;
		border: 2rpx solid #0B87F2;
		line-height: 72rpx;
		font-size: 30rpx;
		text-align: center;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}
	/* new 1.12 */
	.card_item_info_two{
		padding:0 0 16rpx 0;
	}
	.card_item_info_two .menTitle{
		padding:30rpx;
	}
	.card_nav_buy{
		display: flex;
		flex-direction: row;
	}
	.buy_item{
		width: 236rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.buy_line{
		width: 240rpx;
		background: #E8E8E8;
		height: 2rpx;
		display: flex;
		flex-direction: row;
	}
	.buy_line_item{
		width: 50%;
		height: 100%;
	}
	.buy_item:first-child .buy_line .buy_line_item:first-child,
	.buy_item:last-child .buy_line .buy_line_item:last-child
	{
		background: #ffffff !important;
	}
	.b227BF1{
		background: #227BF1 !important;
	}
	.bffffff{
		background: #ffffff !important;
	}

	.buy_top{
		display: flex;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 30rpx;
		width: 216rpx;
		height: 150rpx;
		background: url('/static/newsImg/card-bg-w.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.top_name{
		font-size: 26rpx;
		color: #555555;
	}
	.top_time{
		font-size: 22rpx;
		color: #A0A1A4;
		margin-top: 8rpx;
	}
	.buy_yes{
		background: url('/static/newsImg/card-bg-b.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.buy_yes .top_name,.buy_yes .top_time{
		color: #ffffff;
	}
	.buy_yuan{
		width: 16rpx;
		height: 16rpx;
		background: #BEBEBE;
		border-radius: 50%;
		margin-top: -8rpx;
	}
	.buy_yuan_yes{
		background: linear-gradient(90deg, #B3DCFF 0%, #A7B5FF 100%);
	}
	.buy_yuan_check{
		width: 24rpx;
		height: 24rpx;
		margin-top: -12rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
	}
	.buy_but_box{
		width: auto;
		height: 70rpx;
	}
	.buy_but{
		padding: 0rpx 12rpx;
		margin-top: 14rpx;
		border-radius: 200rpx;
		font-size: 24rpx;
		border:1rpx solid #0F86F2 ;
		color: #0F86F2;
		text-align: center;
		line-height: 48rpx;
	}
	/* end */
	
	/* 通分 */
	.car_tf{
		margin-bottom: unset;
		min-height: 620rpx;
		background-size: 100% 620rpx;
		height: auto;
		background-position: top;
		padding-top: 68rpx;
	}
	.car_tf .card_details_info{
		background: url('/static/index/frustum.png') no-repeat;
		background-size: 100% auto;
		box-shadow: unset;
		padding: unset;
		border-radius: unset;
		width: 750rpx;
		padding-top: 188rpx;
		padding-bottom: 60rpx;
		margin-top: 18rpx;
	}
	.car_tf_img{
		width: 334rpx;
		margin: 0 auto ;
		
	}
	.car_tf_info{
		width: 642rpx;
		margin: 0 auto;
		margin-top: 80rpx;
	}
	/* end */
	/* 标签页 */
	.li_lable{
		width: 642rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
	}
	.lable_item{
		position: relative;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
		padding-left: 30rpx;
		padding-right: 10rpx;
		/* padding: 4rpx 10rpx 4rpx 26rpx; */
		box-sizing: border-box;
		min-width: 126rpx;
		max-width: 280rpx;
		height: 36rpx;
		margin-bottom: 20rpx;
		
	}
	.lable_item image{
		position: absolute;
	}
	
	.lable_xuanzhang image{
		top: -2rpx;
		left: -20rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.lable_xuanzhang {
		margin-left: 10rpx;
		background: linear-gradient(90deg, #FF8540 4.62%, #FF4926 105.38%);
		border-radius: 0rpx 200rpx 200rpx 0rpx;
	}
	.lable_xuanzhang_two image{
		top: -7rpx;
		left: -20rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.lable_xuanzhang_two{
		margin-left: 20rpx;
	}
	.lable_equity image{
		top: -6rpx;
		left: -23rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.lable_equity {
		margin-left: 25rpx;
		background: linear-gradient(90deg, #5C4117 4.62%, #2D3332 105.38%);
		border-radius: 0rpx 200rpx 200rpx 0rpx;
	}
	.lable_grade_box{
		position: relative;
		margin-left: 16rpx;
		height: 36rpx;
	}
	
	.lable_grade image{
		height: 36rpx;
		position: absolute;
		top: 0;
		/* top: -5rpx;
		left: -24rpx;
		width: 44rpx;
		height: 44rpx; */
	}
	.lable_grade {
		position: absolute;
		top: 0;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-left: 16rpx;
		/* background: url('/static/index/lable_bg03.png') no-repeat;
		background-size: 100% 100%; */
		/* background: linear-gradient(90deg, #D0A043 4.62%, #BA7D37 105.38%); */
		border-radius: 0rpx 200rpx 200rpx 0rpx;
	}
	.lable_suanli image{
		top: -5rpx;
		left: -24rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.lable_suanli{
		margin-left: 36rpx;
		background: linear-gradient(90deg, #9D5AFF 4.62%, #4F56FF 105.38%);
		border-radius: 0rpx 200rpx 200rpx 0rpx;
	}
	/* end */
</style>
